<template>
  <div class="login">
    <Header>
      <template v-slot:icon-l><i class="iconfont icon-fanhui" @click='goBack'></i></template>
      <div class="login-title">登录</div>
      <template v-slot:icon-r><img src="@/assets/images/home.png" alt="" class="icons"></template>
    </Header>
    <section>
      <div>
        <input type="text" v-model="userTel" placeholder="请输入手机号" pattern="[0-9]*">
      </div>
      <div class="checkout">
        <input type="password" v-model="userPwd" placeholder="请输入密码" pattern="[0-9]*">
      </div>
      <div class="login-btn" @click="logon">登录</div>
      <div class="tab">
        <span @click="goLogin">短信登录</span>
        <span @click="goRecovery">找回密码</span>
        <span @click="goRegister">快速注册</span>
      </div>
    </section>
  </div>
</template>
  
<script>
import { Toast } from 'vant';
import Header from '@/components/common/Header.vue'
import { mapMutations } from 'vuex';
export default {
  components: {
    Header
  },
  data() {
    return {
      userTel: '',//用户输入的手机号
      userPwd: '',//用户输入的密码
      rules: {
        //手机验证规则
        userTel: {
          rule: /^1[23456789]\d{9}$/,
          msg: '手机号不能为空,并且是11位数字'
        },
        //密码验证规则
        userPwd: {
          rule: /^\w{6,12}$/,
          msg: '密码不能为空,并且要求6-12位'
        }
      }
    }
  },
  computed: {},
  watch: {},
  methods: {
    goBack() {
      this.$router.push({name:'login'})
    },
    goLogin() {
      this.$router.push({ name: 'login' })
    },
    //点击登录
    logon() {
      if (!this.validate('userTel')) return
      if (!this.validate('userPwd')) return
      this.$axios({
        url: '/api/login',
        method: 'post',
        data: {
          userTel: this.userTel,
          userPwd: this.userPwd
        }
      }).then(res => {
        //提示信息
        Toast(res.data.msg)
        if (!res.data.success) return
        //登录成功,存储个人信息
        this.USER_LOGIN(res.data.data)
        this.$router.push({name:'my'})
      })
    },
    validate(key) {
      let bool = true
      if (!this.rules[key].rule.test(this[key])) {
        //提示信息
        Toast(this.rules[key].msg)
        bool = false
        return false
      }
      return bool
    },
    //快速注册
    goRegister() {
      this.$router.push({ name: 'register' })
    },
    //找回密码
    goRecovery(){
      this.$router.push({name:'recoveryPwd'})
    },
    ...mapMutations([
      'USER_LOGIN'
    ])
  },
  created() { },
  mounted() { },
  beforeCreate() { },
  beforeMount() { },
  beforeUpdate() { },
  updated() { },
  beforeDestroy() { },
  destroyed() { },
  activated() { }
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.login {
  .header {
    color: #fff;

    .login-title {
      position: absolute;
      left: 50%;
      transform: translate(-50%, 20%);
      color: #fff;
    }

    .icons {
      width: .8rem;
      height: .8rem;
    }

    ::v-deep .icon-l {
      width: auto;
    }
  }

  section {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 3.2rem);
    align-items: flex-start;
    padding: .5333rem;

    div {
      width: 100%;
      height: 1.1733rem;
      margin-top: .5rem;
      border-radius: 3px;
      box-shadow: 0 0 0 1px #d7d7d7;

      input {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 0 .2667rem;
        background-color: #fff;
      }
    }

    .login-btn {
      border: none;
      margin-top: .5rems;
      background-color: #b0352f;
      width: 100%;
      height: 1.2rem;
      border-radius: .08rem;
      color: #fff;
      text-align: center;
      line-height: 1.2rem;
    }

    .tab {
      display: flex;
      justify-content: space-between;
      font-weight: 500;
      border: none;
      box-shadow: none;
    }

    .checkout {
      margin-top: .8rem;
    }
  }
}
</style>
  